<template>
  <div class="source">
    <el-form class="oldIndent_nav" ref="dataForm">
      <div style="margin-bottom:20px;padding-top:5px;">
        <span style="margin-left:60px">院区：</span>
        <el-input placeholder="请输入院区：" style="width:200px"></el-input>
        <span style="margin-left:60px">科室：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span style="margin-left:60px">医师名字：</span>
        <el-input placeholder="请输入姓名" style="width:200px"></el-input>
        <div style="margin-top:15px;">
          <span style="margin-left:60px">排班编号：</span>
          <el-input placeholder="请输入排班编号" style="width:200px"></el-input>
          <span style="margin-left:50px">日期:</span>
          <el-date-picker
            type="date"
            placeholder="选择时间"
            format="yyyy 年 MM 月 dd 日"
            :picker-options="pickerOptions0"
            value-format="yyyyMMdd"
          ></el-date-picker>
          <span style="margin-left:60px">时间段：</span>
          <el-select v-model="values" placeholder="请选择">
            <el-option
              v-for="item in optionss"
              :key="item.values"
              :label="item.label"
              :value="item.values"
            ></el-option>
          </el-select>
          <el-button type="primary" round style="float:right;margin-right:200px">查询</el-button>
        </div>
      </div>
    </el-form>
    <div class="table" style="margin-bottom:10px;">
      <el-table
        :data="datas"
        border
        style="width: 100%;margin-top:20px;color:black;font-size:20px;"
      >
        <el-table-column align="center" label="日期">
          <span>2019-12-02</span>
        </el-table-column>
        <el-table-column align="center" label="上午剩余号源">
          <span>20</span>
        </el-table-column>
        <el-table-column align="center" label="下午剩余号源">
          <span>30</span>
        </el-table-column>
        <el-table-column align="center" label="上午总号源">
          <span>40</span>
        </el-table-column>
        <el-table-column align="center" label="下午总号源">
          <span>50</span>
        </el-table-column>
      </el-table>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="codeId" align="center" label="号源ID"></el-table-column>
      <el-table-column prop="pbCode" align="center" label="排班编号"></el-table-column>
      <el-table-column prop="timeType" align="center" label="时间段"></el-table-column>
      <el-table-column prop="seqNum" align="center" label="挂号序号"></el-table-column>
      <el-table-column prop="timePart" align="center" label="参考就诊时间"></el-table-column>
      <el-table-column prop="schType" align="center" label="挂号类别"></el-table-column>
      <el-table-column prop="useFlag" align="center" label="有效标识"></el-table-column>
       <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleClick(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          codeId: "1231",
          pbCode: "144232",
          timeType: "上午",
          seqNum: "1545",
          timePart: "10:40",
          schType: "名医",
          useFlag: "已挂"
        },
        {
          codeId: "415123",
          pbCode: "523123",
          timeType: "下午",
          seqNum: "15123",
          timePart: "13:20",
          schType: "专家",
          useFlag: "有效"
        },
        {
          codeId: "6456",
          pbCode: "3121",
          timeType: "上午",
          seqNum: "12313",
          timePart: "9:50",
          schType: "专家",
          useFlag: "有效"
        },
        {
          codeId: "415645",
          pbCode: "5645",
          timeType: "上午",
          seqNum: "1032156",
          timePart: "11:10",
          schType: "普通",
          useFlag: "有效"
        },
        {
          codeId: "645",
          pbCode: "35453",
          timeType: "下午",
          seqNum: "323",
          timePart: "14:30",
          schType: "名医",
          useFlag: "已挂"
        },

      ],
      datas:[
          {}
      ],
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, //页数
      total: 5,
      options: [
        {
          value: "1",
          label: "眼科"
        },
        {
          value: "2",
          label: "骨科"
        },
        {
          value: "3",
          label: "肛肠科"
        },
        {
          value: "4",
          label: "眼科"
        },
        {
          value: "5",
          label: "神经科"
        }
      ],
      value: "1",
      optionss: [
        {
          values: "1",
          label: "上午"
        },
        {
          values: "2",
          label: "下午"
        },
        {
          values: "0",
          label: "全部"
        }
      ],
      values: "0"
    };
  },
  methods: {
    //当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize;
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
     handleClick(row) {
         this.$router.push({ name: "号源信息详情", params: { data: row } });
    },
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.source {
  margin-top: 55px;
}
</style>